<template>
    <!-- 添加宠物页面 -->
    <div class="pet">
      <!-- navbar标题栏 -->
      <van-nav-bar title="宠物资料" left-text="返回" left-arrow @click-left="goBack" />
      <!-- 头像区域 -->
      <div class="pic">
        <!-- 头像上传组件 -->
        <van-uploader
          class="list-upload"
          :max-count="1"
          accept="image/jpeg, image/png"
          :after-read="afterRead"
          :preview-image="false"
          multiple
          v-model="fileList"
        >
          <!-- 自定义上传效果 -->
          <template v-if="imgUrl==null">
            <van-image
              fit="cover"
              round
              width="10rem"
              height="10rem"
              :src="require('@/assets/img/logo.jpg')"
              style="background-color:#fff;border:1px solid gray;padding:1rem;box-sizing: border-box;"
            />
          </template>
        </van-uploader>
        <!-- 如果选择了头像后，这里显示图片 -->
        <img v-if="imgUrl" alt class="afterImg" :src="imgUrl" />
        <!-- 右下角小相机图标 -->
        <img
          v-show="hidden_xiangji"
          src="../assets/img/xiangji.png"
          style="width: 2rem; position: absolute; top: 13rem; left: 21.5rem"
        />
      </div>
      <!-- 表单 -->
      <van-field name="radio" label="类型">
        <template #input>
          <van-radio-group v-model="typeRadio" direction="horizontal">
            <van-radio name="cat">猫咪</van-radio>
            <van-radio name="dog">狗狗</van-radio>
            <!-- <van-radio name="bird">小鸟</van-radio> -->
          </van-radio-group>
        </template>
      </van-field>
      <!-- 宠物名 -->
      <van-field v-model="petName" label="名字" placeholder="请填写宠物名字" />
      <!-- 宠物年龄 -->
      <van-field v-model="petAge" type="number" label="年龄" placeholder="请输入阿拉伯数字" />
      <!-- 宠物性别 -->
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="sexRadio" direction="horizontal">
            <van-radio name="female">女生</van-radio>
            <van-radio name="male">男生</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!-- 宠物品种 -->
      <van-field v-model="petBreed" label="品种" placeholder="非必填" />
      <van-field
        v-model="describe"
        rows="2"
        autosize
        label="宠物简介"
        type="textarea"
        maxlength="50"
        placeholder="非必填"
        show-word-limit
      />
      <div style="margin: 16px">
        <van-button
          style="background-color: #f8e176;color:#fff;"
          size="large"
          round
          @click="AddPetData"
        >添加</van-button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        imgUrl: null, // 上传成功之后的图片地址
        fileList: [],
        hidden_xiangji: true,
        petName: "", // 宠物名字
        petNameErr: false,
        petAge: "", //宠物年龄
        petAgeErr: false,
        typeRadio: "cat", // 宠物类型
        sexRadio: "female", // 宠物性别
        petBreed: "", // 宠物品种
        describe: "" // 宠物简介
      };
    },
    methods: {
      /**
       * 返回上一页
       */
      goBack() {
        this.$router.back();
      },
      /**
       * 上传头像
       */
      afterRead(file) {
        let that = this;
        // 此时可以自行将文件上传至服务器
        console.log(file);
        // 创建表单数据对象
        var data = new FormData();
        data.append("file", file.file);
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        // 上传图片
        this.http
          .post("http://192.168.13.21:9001/upload", data, config)
          .then(res => res.data)
          .then(res => {
            if (res.code == 200) {
              console.log("文件上传成功返回：", res.data);
              that.fileList.push(res.data);
              that.imgUrl = res.data;
              console.log("-----", that.imgUrl);
              that.hidden_xiangji = !this.hidden_xiangji;
            }
          });
      },
      /**
       * 添加宠物
       */
      AddPetData() {
        if (!this.imgUrl) {
          this.$msg.fail("请添加宠物头像");
          return;
        }
        if (!this.petName) {
          this.$msg.fail("请添加宠物名");
          return;
        }
        if (!this.petAge) {
          this.$msg.fail("请添加宠物年龄");
          return;
        }
        // 封装请求数据
        const data = {
          pImg: this.imgUrl,
          pName: this.petName,
          pYear: this.petAge,
          pGender: this.sexRadio == "female" ? 0 : 1,
          pType: this.typeRadio == "cat" ? 1 : 2,
          pContent: this.describe,
          pBreed: this.petBreed
        };
        // 请求服务器
        this.http
          .post(this.$api.addPet, data)
          .then(res => res.data)
          .then(res => {
            if (res.code == 200) {
              this.$msg.success(res.msg);
              this.$router.back();
            } else {
              this.$msg.fail(res.msg);
            }
          });
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .pic {
    background-color: #f8e176;
    height: 15rem;
    text-align: center;
    padding-top: 5rem;
    position: relative;
  }
  .afterImg {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid gray;
    background-color: #f0f0f0;
  }
  </style>